import React, { Component } from 'react'
import { Select,Modal} from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'

import {formatDate} from '../../utils/dateUtils'
import menuList from '../../config/menuConfig'
import LinkButton from '../link-button'
import {reqWeather} from '../../api'
import {userLogout} from '../../redux/actions'

import './index.css'

const { Option } = Select

class Header extends Component {

    state = {
        currentTime: formatDate(Date.now()),
        weather: '', // 天气数据
        temperature: '' // 温度
    }

    //  获取天气信息
    getWeather = async (cityCode) => {
        const {weather, temperature} = await reqWeather(cityCode)
        this.setState({weather, temperature})
    }

    // 根据城市展示天气状况
    handleChange = (value) => {
        this.getWeather(value)
    }

    // // 获取标题
    // getTitle = () => {
    //     const path = this.props.location.pathname
    //     let title
    //     menuList.forEach(
    //         item => {
    //             if (item.key === path) {
    //                 title = item.title
    //             } else if (item.children) {
    //                 const cItem = item.children.find(cItem => cItem.key === path)
    //                 if (cItem) {
    //                     title = cItem.title
    //                 }
    //             }
    //         }

    //     )
    //     return title
    // }

    // 登出
    logout = () => {
        Modal.confirm({
            icon: <ExclamationCircleOutlined />,
            content: '确定退出吗？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                this.props.userLogout()
            },
            onCancel: () => {
            }
          })
    }

    // render()执行后执行，只执行一次
    componentDidMount () {
        // 每秒获取一次时间
        this.intervalId = setInterval(
            () => {
                const currentTime = formatDate(Date.now())
                this.setState({currentTime})
            }, 1000)
        
        // 获取天气信息
        this.getWeather(210200)
    }

    // 组件将要卸载之前调用
    componentWillUnmount () {
        // 清除定时器
        clearInterval(this.intervalId)
    }

    render() {
        const {currentTime, weather, temperature} = this.state
        // const title = this.getTitle()
        const title = this.props.headTitle
        
        return (
            <div className="header">
                <div className="header-top">
                    <span className="header-top-welcome">欢迎 {this.props.user.username}</span>
                    <LinkButton onClick={this.logout}>退出</LinkButton>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {title}
                    </div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <Select className="select-city" defaultValue="210200" style={{ width: 80 }} onChange={this.handleChange} size="small">
                            <Option value="210200">大连</Option>
                            <Option value="210100">沈阳</Option>
                            <Option value="370200">青岛</Option>
                            <Option value="230100">哈尔滨</Option>
                        </Select>
                        <span style={{marginRight: '12px'}}>{weather}</span>
                        <span>气温:{temperature}°C</span>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect(
    state => ({headTitle: state.headTitle, user: state.user}),
    {userLogout}
)(withRouter(Header))
